<template>
	<view class="container">

		<view class="nav">
			<view class="nav__item" :class="tabIdx == item.id ? '--focus' : ''" v-for="(item,index) in navList"
				:key="index" @click="changeNavItem(item.id)">
				{{item.name}}
			</view>
			<view class="nav__bottom" :style="{'transform':activeBottom}"></view>
		</view>

		<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"> -->
		<view class="content">
			<block v-for="(item,index) in vouchersList" :key="index" >
				<view @click="goIndex" class="list" v-if="item.state != 2 && canUse" style="background: url('../../../static/images/prefile/voucher.png');background-size: 100%">
					<div class="list__title can_use">拼团券</div>
					<view class="list__btn" @click="useVochers(item)" v-if="item.state != 1">去使用</view>
					<view  class="list__date">{{item.created_time}} 到期</view>
				</view>
				<view @click="goIndex" class="list" v-if="item.state == 2 && !canUse" style="background: url('../../../static/images/prefile/voucher_overdue.png');background-size: 100%">
					<view class="list__title no_use" >拼团券</view>
					<view class="list__btn no_use_btn" v-if="item.state != 1">去使用</view>
					<view  class="list__date no_use__date">{{item.created_time}} 到期</view>
				</view>
			</block>
		</view>
		<!-- </mescroll-body> -->
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				tabIdx: 1,
				page: 1,
				apiUrl: '',
				apiParams: {},
				navList: [{
						id: 1,
						name: '待使用'
					},
					{
						id: 2,
						name: '已过期'
					}
				],
				vouchersList: [],
				canUse: '',
			};
		},
		onLoad(options) {
			this.init()
		},
		computed: {
			// 激活时的滑块位置
			activeBottom() {
				if (this.tabIdx == 1) {
					return 'translateX(155rpx)';
				} else {
					return 'translateX(508rpx)';
				}
			}
		},
		methods: {
			goIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			// 初始化
			init() {
				this.initNavStatus();
				this.getOrderList();
			},
			// 获取订单列表
			getOrderList() {
				this.apiUrl = '/addons/yun_shop/api.php?route=plugin.fight-groups.frontend.controllers.team.team-pay-log'
				this.apiParams = {
					page: this.page
				}
				this.$api.get(this.apiUrl, this.apiParams).then(res => {
					console.log(res, 111);
					this.vouchersList = res.data
				})
			},
			// 初始化导航状态
			initNavStatus() {
				if (this.tabIdx == 1) {
					this.canUse = true
				} else {
					this.canUse = false
				}
				
			},
			// 点击导航栏切换
			changeNavItem(id) {
				this.tabIdx = id;
				this.page = 1;
				this.vouchersList = [];
				this.init();
				// this.downCallback();
			},
			
			// 使用代金券
			useVochers (item) {
				console.log(item);
			},

			// 下拉刷新列表
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				this.page = page.num;
				this.$api.get(this.apiUrl, this.apiParams).then(res => {
					let len = res.data.data.length
					let total = res.data.total
					if (page.num == 1) {
						this.vouchersList = []; //如果是第一页需手动置空列表
					}
					this.vouchersList = this.vouchersList.concat(res.data.data); //追加新数据
					this.mescroll.endBySize(len, total);
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './my-vouchers.scss'
</style>
